<template>
	<view class="calendar-item">
		<view class="date">{{info.date}}</view>
		<view class="time-box" v-for="timeObj in info.times" :key="timeObj.time">
			<view class="time">{{timeObj.time}}</view>
			<view class="goods-list">
				<view class="goods-item" v-for="item in timeObj.list" :key="item.goods_id">
					<view class="goods-cover">
						<easy-loadimage class="goods-img" mode="aspectFill" :scroll-top="scrollTop" :image-src="item.goods_image" border-radius="40rpx"></easy-loadimage>
					</view>
					<view class="goods-info">
						<view class="goods-title">{{ item.goods_name }}</view>
						<view class="global-limit-box">
							<view class="global-limit">全球限量</view>
							<view class="global-limit-count">{{ item.show_total_stock_num }}份</view>
						</view>
						<view class="goods-price">￥ {{item.min_goods_price}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "sale-calendar",
		/**
		 * 组件的属性列表
		 */
		props: {
			info: Object,
			scrollTop:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				
			}
		},
	
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.calendar-item{
		margin-bottom: 28rpx;
		padding-top:40rpx;
		background: #2B2C2E;
		border-radius: 35rpx;
	}
	.calendar-item .date{
		margin-left: 22rpx;
		font-size: 38rpx;
		font-weight: bold;
		color: $uni-text-color-inverse;
	}
	.calendar-item .time{
		margin: 24rpx 0 24rpx 22rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: $uni-text-color-inverse;
	}
	.goods-item{
		box-sizing: border-box;
		display: flex;
		align-items: center;
		padding-right:40rpx;
		width: 100%;
		height: 242rpx;
		background: #434443;
		border-radius: 40rpx;
		overflow: hidden;
	}
	.goods-item + .goods-item{
		margin-top:18rpx;
	}
	
	.goods-cover{
		flex-shrink: 0;
		margin-right: 30rpx;
		width: 242rpx;
		height: 242rpx;
		border-radius: 40rpx;
		overflow: hidden;
	}
	.goods-info{
		flex-shrink: 1;
		flex-grow: 1;
		width: 60%;
	}
	.goods-img{
		width: 242rpx;
		height: 242rpx;
	}
	.goods-title{
		margin-bottom: 28rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: $uni-text-color-inverse;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.global-limit-box{
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
		height: 30rpx;
		width: 220rpx;
		background: rgba(225, 222, 222, .2);
		border-radius: 2rpx;
		overflow: hidden;
		text-align: center;
		font-size: 19rpx;
		line-height: 30rpx;
	}
	.global-limit {
		display: inline-block;
		width: 102rpx;
		height: 30rpx;
		background: $uni-bg-color-main-linear;
		border-radius: 2rpx;
		color: #000;
	}

	.global-limit-count {
		display: inline-block;
		width: 118rpx;
		height: 30rpx;
		color: $uni-text-color-main;
	}
	.goods-price{
		font-size: 35rpx;
		font-weight: bold;
		color: $uni-text-color-inverse;
	}
</style>
